<template>
	<div class="container" ref="homePage">
		<div class="routerView frontView" ref="routerViewPage">
		  <router-view></router-view>  
		</div>
	</div>
</template>

<script>
	export default {
		data(){
		  return {
		    clientHeight:"" // 屏幕高度
		  }
		},
		created(){},
		mounted(){
			// 获取浏览器可视区域高度
		    this.clientHeight =   `${document.documentElement.clientHeight}`          
		    window.onresize = function temp() {
		      this.clientHeight = `${document.documentElement.clientHeight}`;
		    };
		},
		methods:{
		  changeFixed(clientHeight){  //动态修改样式        
			this.$refs.homePage.style.height = clientHeight+'px';         
		    this.$refs.routerViewPage.style.top = clientHeight/5 + 'px'
		  },
		},
		watch:{
		  // 如果 `clientHeight` 发生改变，这个函数就会运行
		  clientHeight: function () {
		    this.changeFixed(this.clientHeight)
		  },
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
		width: 100%;
		margin:0;
		padding:0;
		background-image:url('../../images/index.jpg');
		// background-origin:content-box;
		// background-size:cover;
		background-size:100% 100%;
		background-repeat: no-repeat;
		// background-position: center 0;
		.routerView{
			position: absolute;
			width: 45%;
			min-height: 60%;
			max-height: 80%;
			right: 14%;
			z-index: 1;
		}
		.backRouter{
			width: 100%;
			height: 100%;
			z-index: 9;
		}
	}
</style>
